<template>
    <a-row type="flex" align="top">    
        <a-col :span="18" class="main-container">
            <a-row type="flex" align="top" style="gap: 16px;flex-direction: column;">
                <!-- 发布区域 -->
              <a-col style="background-color: #fff; border-radius: 10px;width: 100%;padding: 16px;padding-bottom: 0;">
                <a-form
                    ref="formMobileRef"
                    :model="form"
                    class="iconForm-container"
                    v-if="form.allowTopic">
                    <a-row>    
                        <!-- <a-col :span="5">
                            <a-form-item :validate-status="error.tagId ? 'error' : ''" :help="error.tagId">
                                <a-select
                                    v-model:value="form.tagIdGroup"
                                    @focus="queryTagList"
                                    @change="selectedTag"
                                    placeholder="选择标签"
                                    :no-data-content="'还没有标签'">
                                    <a-select-option 
                                        v-for="item in form.options" 
                                        :key="item.postNum" 
                                        :value="item.tagName">
                                        {{ item.tagName }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="18" :style="{ marginLeft: '8px' }">
                            <a-form-item :validate-status="error.title ? 'error' : ''" :help="error.title">
                                <a-input 
                                    v-model:value="form.title" 
                                    placeholder="标题" 
                                    :maxLength="90"
                                    allowClear>
                                </a-input>
                            </a-form-item>
                        </a-col> -->
                        <a-col :span="24" style="display: flex; gap: 12px; margin: 8px 0 12px 8px;">
                            <a-button type="primary" style="width: 90px; height: 35px; border-radius: 20px; display: flex; align-items: center; justify-content: center;">
                                <template #icon><icon-plus /></template>
                                随便聊
                            </a-button>
                            <a-button type="primary" ghost style="width: 90px; height: 35px; border-radius: 20px; display: flex; align-items: center; justify-content: center;" @click="handlePublish">
                                <template #icon><icon-edit /></template>
                                写文章
                            </a-button>
                        </a-col>
                    </a-row>

                    <a-form-item :validate-status="error.content ? 'error' : ''" :help="error.content">
                        <Editor1 v-model="form.content" :min-height="162"/>
                    </a-form-item>
                    <div class="tag-list">
                        <a-tag 
                            v-for="(tag, index) in form.tags" 
                            :key="index"
                            closable
                            :color="getRandomColor()"
                            @close="handleTagClose(index)"
                        >
                            #{{ tag }}
                        </a-tag>
                    </div>
                    <a-form-item>
                        <div style="display: flex; justify-content: space-between;align-items: center;">
                            <a-popover 
                               trigger="hover" 
                               placement="bottom"
                               overlayClassName="tag-popover">
                               <template #content>
                                   <div class="tag-search-container">
                                       <a-input-search
                                           v-model:value="tagSearchValue"
                                           placeholder="搜索标签"
                                           style="margin-bottom: 8px"
                                           @change="handleTagSearch"
                                       />
                                       <div class="tag-list-container">
                                           <div 
                                               v-for="item in filteredTags" 
                                               :key="item.postNum"
                                               class="tag-item"
                                               :class="{ 'disabled': form.tags.includes(item.tagName) }"
                                               @click="selectedTag(item.tagName)"
                                           >
                                               #{{ item.tagName }}
                                           </div>
                                       </div>
                                   </div>
                               </template>
                               <div class="tag-trigger">
                                   <span>#添加标签</span>
                                   <icon-down style="margin-left: 4px" />
                               </div>
                            </a-popover>
                        <a-button 
                            type="primary" 
                            size="mini"  
                            @mousedown="onSubmit" 
                            :disabled="form.allowSubmit" 
                            class="publish-btn">
                            发布
                        </a-button>
                        </div>
                    </a-form-item>
                </a-form>        
              </a-col>

              <!-- 展示区域 -->
              <a-col style="background-color: #fff; border-radius: 10px;width: 100%;">
                    <div class="mainContent">
                    <ul class="serviceNav">
                        <li class="title" :class="{ 'active': currentTab === 'recommend'}" @click="switchTab('recommend')"><p>推荐</p></li>
                        <li class="title" :class="{ 'active': currentTab === 'choice'}" @click="switchTab('choice')"><p>精选</p></li>
                        <li class="title" :class="{ 'active': currentTab === 'hot'}" @click="switchTab('hot')"><p>热门</p></li>
                    </ul>
                </div>
                <div class="topicList">
                    <div class="topicItem" v-for="topic in showData" >
                        <div class="avatarBox">
                            <a-popover
                                trigger="hover"
                                placement="right"
                                @mouseenter="handleMouseEnter(topic.userId)">
                                <template #content>
                                    <div class="user-popover">
                                        <a-spin :spinning="!userInfo[topic.userId]" :indicator="indicator">
                                            <div class="user-info" v-if="userInfo[topic.userId]">
                                                <img :src="topic.avatar" class="avatar"/>
                                                <div class="info">
                                                    <div class="name">{{topic.username}}</div>
                                                    <div class="stats">
                                                        <span>性别: {{userInfo[topic.userId].sex=='1'?'男':'女' || '未填写'}}</span>
                                                        <span>帖子: {{userInfo[topic.userId].postsCount}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="remark">{{userInfo[topic.userId]?.email || '未绑定邮箱~'}}</div>
                                            <div class="remark">{{userInfo[topic.userId]?.remark || '这个人很懒,什么都没写~'}}</div>
                                        </a-spin>
                                    </div>
                                </template>
                                <router-link tag="a" 
                                    v-if="topic.username" 
                                    class="avatarLink" 
                                    :to="{path:'/user/control/home',query: {userId: topic.userId}}" 
                                    target="_blank">
                                    <img :src="topic.avatar" width="62" height="62" class="img"/>
                                </router-link>
                            </a-popover>
                        </div>
                        
                        <div class="content">
                            
                            <ul class="info">
                                <li>
                                    <router-link tag="a" class="userName" :to="{path:'/user/control/home',query: {userId: topic.userId}}" target="_blank">
                                        {{topic.username}}
                                    </router-link>
                                </li>
                            </ul>
                            <div class="time">
                                <div class="postTime">
                                    {{formatTime(topic.createTime)}}
                                </div>
                            </div>
    
                            <h2 class="title">
                                <router-link tag="a" :to="{path: '/social/detail', query:{ postId : topic.postId}}" target="_blank" @click="updateViewF(topic.postId)">
                                    {{topic.title}}
                                </router-link>
                            
                                <span class="top" v-if="false">置顶</span>
                            </h2>
    
                            <div class="detail">
                                <router-link tag="a" :to="{path: '/social/detail', query:{ postId : topic.postId}}" target="_blank" @click="updateViewF(topic.postId)">
                                    <h2 class="summary" v-html="truncateContent(sanitizeHtml(topic.content), 100)">
                                    </h2>
                                    <span v-if="isContentTruncated(sanitizeHtml(topic.content), 100)" class="read-more">
                                        查看全文
                                    </span>
                                </router-link>
                            </div>
                            
                            <div class="bottomInfo">
                                <div class="tag-container" >
                                    <span class="tag" v-for="tag of topic.tagList">{{tag}}</span>
                                </div>
                                <div class="statistic">
                                    <div class="iconItem">
                                        <div @click="handleLike(topic.postId,topic.userId,topic.likeFlag)">
                                            <div v-if="!topic.likeFlag" class="icon-wrapper">
                                                <svg t="1735046296972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6672" width="15" height="15"><path d="M768 937.353846h-567.138462c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h117.366154c13.390769-5.513846 88.221538-42.535385 95.31077-241.033846 0-33.083077 24.418462-58.289231 60.652307-63.015385 58.289231-7.876923 133.907692 31.507692 154.387693 102.4 18.116923 64.590769 0 150.449231-14.178462 201.649231h208.738462c33.870769 0 66.166154 14.966154 88.221538 40.96 22.055385 25.993846 31.507692 60.652308 25.206154 94.523077l-55.138462 314.289231c-8.664615 55.926154-56.713846 96.098462-113.427692 96.098461z m-567.138462-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h567.138462c25.993846 0 47.261538-18.116923 51.987692-43.323077l55.138462-314.289231c2.363077-15.753846-1.575385-30.72-11.815385-43.323077-10.24-11.815385-24.418462-18.904615-40.172307-18.904615h-252.061539c-10.24 0-19.692308-4.726154-25.993846-13.390769-5.513846-8.664615-7.089231-19.692308-3.938462-29.144616 13.390769-35.446154 44.110769-141.784615 25.993847-204.8-8.664615-29.932308-35.446154-48.049231-57.501539-54.350769-18.116923-5.513846-30.72-3.150769-34.658461-1.575385v0.787693c-8.664615 268.603077-133.907692 299.323077-148.086154 301.686154-1.575385 0-3.938462 0.787692-5.513846 0.787692H200.861538z" fill="#2c2c2c" p-id="6673"></path><path d="M200.861538 423.778462c-46.473846 0-84.283077 37.809231-84.283076 84.283076v314.289231c0 46.473846 37.809231 84.283077 84.283076 84.283077h72.467693V423.778462h-72.467693z" fill="#2c2c2c" p-id="6674"></path><path d="M273.329231 937.353846h-72.467693c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h72.467693c17.329231 0 31.507692 14.178462 31.507692 31.507692V905.846154c0 17.329231-14.178462 31.507692-31.507692 31.507692z m-72.467693-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h40.96V455.286154h-40.96z" fill="#2c2c2c" p-id="6675"></path></svg>
                                            </div>
                                            <div v-else>
                                                <svg t="1735046296972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6672" width="15" height="15"><path d="M768 937.353846h-567.138462c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h117.366154c13.390769-5.513846 88.221538-42.535385 95.31077-241.033846 0-33.083077 24.418462-58.289231 60.652307-63.015385 58.289231-7.876923 133.907692 31.507692 154.387693 102.4 18.116923 64.590769 0 150.449231-14.178462 201.649231h208.738462c33.870769 0 66.166154 14.966154 88.221538 40.96 22.055385 25.993846 31.507692 60.652308 25.206154 94.523077l-55.138462 314.289231c-8.664615 55.926154-56.713846 96.098462-113.427692 96.098461z m-567.138462-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h567.138462c25.993846 0 47.261538-18.116923 51.987692-43.323077l55.138462-314.289231c2.363077-15.753846-1.575385-30.72-11.815385-43.323077-10.24-11.815385-24.418462-18.904615-40.172307-18.904615h-252.061539c-10.24 0-19.692308-4.726154-25.993846-13.390769-5.513846-8.664615-7.089231-19.692308-3.938462-29.144616 13.390769-35.446154 44.110769-141.784615 25.993847-204.8-8.664615-29.932308-35.446154-48.049231-57.501539-54.350769-18.116923-5.513846-30.72-3.150769-34.658461-1.575385v0.787693c-8.664615 268.603077-133.907692 299.323077-148.086154 301.686154-1.575385 0-3.938462 0.787692-5.513846 0.787692H200.861538z" fill="#4d9cdd" p-id="6673"></path><path d="M200.861538 423.778462c-46.473846 0-84.283077 37.809231-84.283076 84.283076v314.289231c0 46.473846 37.809231 84.283077 84.283076 84.283077h72.467693V423.778462h-72.467693z" fill="#4d9cdd" p-id="6674"></path><path d="M273.329231 937.353846h-72.467693c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h72.467693c17.329231 0 31.507692 14.178462 31.507692 31.507692V905.846154c0 17.329231-14.178462 31.507692-31.507692 31.507692z m-72.467693-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h40.96V455.286154h-40.96z" fill="#4d9cdd" p-id="6675"></path></svg>
                                            </div>
                                        </div>
                                        <p :style="{color: !topic.likeFlag ? '#2c2c2c' : '#4d9cdd'}">{{topic.likeCount}}</p>
                                    </div>
                                    <div class="iconItem">
                                        <div @click="handleCollect(topic.postId,topic.userId,topic.collectFlag)">

                                            <div v-if="!topic.collectFlag" class="icon-wrapper">
                                                <svg t="1734707381648" class="icon" viewBox="0 0 1059 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4419" width="15" height="15"><path d="M253.488042 1024c-16.9 0-33.2875-5.1125-47.6125-15.3625-26.625-18.425-39.425-49.6625-34.3125-81.925l40.9625-251.9c1.5375-10.2375-1.5375-20.475-8.7-27.65L28.213042 466.4375c-22.0125-22.525-29.1875-55.3-19.45-84.9875 9.725-29.7 35.325-51.2 66.05-55.8125l237.575-36.35c10.75-1.5375 19.4625-8.1875 24.0625-17.925L441.388042 48.125c13.825-29.7 42.5-48.125 75.2625-48.125s61.4375 18.4375 75.2625 48.125l104.45 223.2375c4.6125 9.725 13.825 16.375 24.0625 17.925L958.000542 325.625a82.355 82.355 0 0 1 66.05 55.8125c10.2375 29.7 2.5625 62.4625-19.45 84.9875l-175.625 180.7375c-7.1625 7.175-10.2375 17.925-8.7 27.65l40.9625 251.9c5.125 31.75-8.1875 63.4875-34.3 81.925-26.1125 18.4375-59.9 20.4875-88.0625 4.6125l-206.85-114.6875c-9.725-5.1125-20.9875-5.1125-30.7125 0l-207.3625 115.2c-12.8125 6.65-26.6375 10.2375-40.4625 10.2375zM516.650542 51.2c-12.8 0-23.55 7.1625-29.1875 18.4375L383.525542 292.875c-11.775 25.0875-35.325 43.0125-62.975 47.1l-237.575 36.35c-12.2875 2.05-21.5 9.7375-25.6 21.5-4.1 11.775-1.025 24.0625 7.675 32.775L240.688042 611.325c18.4375 18.95 26.625 45.5625 22.525 71.675L222.250542 934.9125c-2.05 12.8 3.075 24.575 13.3125 31.7375 10.2375 7.175 23.0375 7.6875 33.7875 1.5375l207.3625-115.2c25.0875-13.825 55.3-13.825 80.3875 0l207.3625 115.2c10.75 6.1375 23.55 5.625 33.8-1.5375 10.2375-7.1625 15.3625-18.95 13.3125-31.7375L770.625542 683.0125c-4.1-26.1125 4.1-52.7375 22.525-71.675l175.625-180.7375c8.7-8.7 11.2625-20.9875 7.675-32.775-4.0875-11.775-13.3125-19.9625-25.6-21.5l-237.5625-36.35c-27.65-4.0875-51.2-22.0125-62.975-47.1L545.838042 69.6375c-5.625-11.2625-16.375-18.4375-29.1875-18.4375z m0 0" p-id="4420" fill="#2c2c2c"></path></svg>
                                            </div>
                                            <div v-else>
                                                <svg t="1734707381648" class="icon" viewBox="0 0 1059 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4419" width="15" height="15"><path d="M253.488042 1024c-16.9 0-33.2875-5.1125-47.6125-15.3625-26.625-18.425-39.425-49.6625-34.3125-81.925l40.9625-251.9c1.5375-10.2375-1.5375-20.475-8.7-27.65L28.213042 466.4375c-22.0125-22.525-29.1875-55.3-19.45-84.9875 9.725-29.7 35.325-51.2 66.05-55.8125l237.575-36.35c10.75-1.5375 19.4625-8.1875 24.0625-17.925L441.388042 48.125c13.825-29.7 42.5-48.125 75.2625-48.125s61.4375 18.4375 75.2625 48.125l104.45 223.2375c4.6125 9.725 13.825 16.375 24.0625 17.925L958.000542 325.625a82.355 82.355 0 0 1 66.05 55.8125c10.2375 29.7 2.5625 62.4625-19.45 84.9875l-175.625 180.7375c-7.1625 7.175-10.2375 17.925-8.7 27.65l40.9625 251.9c5.125 31.75-8.1875 63.4875-34.3 81.925-26.1125 18.4375-59.9 20.4875-88.0625 4.6125l-206.85-114.6875c-9.725-5.1125-20.9875-5.1125-30.7125 0l-207.3625 115.2c-12.8125 6.65-26.6375 10.2375-40.4625 10.2375zM516.650542 51.2c-12.8 0-23.55 7.1625-29.1875 18.4375L383.525542 292.875c-11.775 25.0875-35.325 43.0125-62.975 47.1l-237.575 36.35c-12.2875 2.05-21.5 9.7375-25.6 21.5-4.1 11.775-1.025 24.0625 7.675 32.775L240.688042 611.325c18.4375 18.95 26.625 45.5625 22.525 71.675L222.250542 934.9125c-2.05 12.8 3.075 24.575 13.3125 31.7375 10.2375 7.175 23.0375 7.6875 33.7875 1.5375l207.3625-115.2c25.0875-13.825 55.3-13.825 80.3875 0l207.3625 115.2c10.75 6.1375 23.55 5.625 33.8-1.5375 10.2375-7.1625 15.3625-18.95 13.3125-31.7375L770.625542 683.0125c-4.1-26.1125 4.1-52.7375 22.525-71.675l175.625-180.7375c8.7-8.7 11.2625-20.9875 7.675-32.775-4.0875-11.775-13.3125-19.9625-25.6-21.5l-237.5625-36.35c-27.65-4.0875-51.2-22.0125-62.975-47.1L545.838042 69.6375c-5.625-11.2625-16.375-18.4375-29.1875-18.4375z m0 0" p-id="4420" fill="#4d9cdd"></path></svg>
                                            </div>
                                        </div>
                                        <p :style="{color: !topic.collectFlag ? '#2c2c2c' : '#4d9cdd'}">{{topic.collectCount}}</p>
                                    </div>
                                    <div class="iconItem">
                                        <router-link tag="a" :to="{path: '/social/detail', query:{ postId : topic.postId}}" target="_blank" @click="updateViewF(topic.postId)">
                                            <svg t="1734707475236" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6694" width="15" height="15"><path d="M512 0C229.696 0 0 196.672 0 438.421333c0 144.384 82.282667 278.336 220.778667 360.469333l0 203.733333c0 8.213333 4.714667 15.744 12.181333 19.285333C235.882667 1023.338667 239.04 1024 242.154667 1024c4.8 0 9.578667-1.621333 13.461333-4.8l181.589333-147.456c26.794667 3.413333 51.370667 5.077333 74.794667 5.077333 282.282667 0 512-196.693333 512-438.421333C1024 196.672 794.282667 0 512 0zM512.021333 834.090667c-24.106667 0-49.664-1.941333-78.144-5.952-5.845333-0.874667-11.84 0.832-16.448 4.586667l-153.92 125.034667 0-171.2c0-7.701333-4.16-14.848-10.901333-18.602667-131.413333-73.813333-209.877333-197.013333-209.877333-329.514667C42.730667 220.245333 253.269333 42.730667 512 42.730667s469.312 177.472 469.312 395.648S770.773333 834.090667 512.021333 834.090667z" p-id="6695" fill="#2c2c2c"></path><path d="M512 438.4m-49.066667 0a2.3 2.3 0 1 0 98.133333 0 2.3 2.3 0 1 0-98.133333 0Z" p-id="6696" fill="#2c2c2c"></path><path d="M266.709333 438.4m-49.066667 0a2.3 2.3 0 1 0 98.133333 0 2.3 2.3 0 1 0-98.133333 0Z" p-id="6697" fill="#2c2c2c"></path><path d="M757.290667 389.333333c-27.114667 0-49.024 21.952-49.024 49.088 0 27.136 21.888 49.045333 49.024 49.045333 27.157333 0 49.088-21.909333 49.088-49.045333C806.378667 411.285333 784.448 389.333333 757.290667 389.333333z" p-id="6698" fill="#2c2c2c"></path></svg>
                                        </router-link>
                                        <p>{{topic.commentCount}}</p>
                                    </div>
                                    <div class="iconItem">
                                        <svg t="1734707421038" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5556" width="15" height="15"><path d="M512 608a96 96 0 1 1 0-192 96 96 0 0 1 0 192m0-256c-88.224 0-160 71.776-160 160s71.776 160 160 160 160-71.776 160-160-71.776-160-160-160" p-id="5557" fill="#2c2c2c"></path><path d="M512 800c-212.064 0-384-256-384-288s171.936-288 384-288 384 256 384 288-171.936 288-384 288m0-640C265.248 160 64 443.008 64 512c0 68.992 201.248 352 448 352s448-283.008 448-352c0-68.992-201.248-352-448-352" p-id="5558" fill="#2c2c2c"></path></svg>
                                        <P>{{topic.viewCount}}</P>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 数据底部显示 -->
                    <div v-if="!state.loading" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                        <a-divider v-if="showData.length > 0">
                          {{ !state.isLoading ? '已经到底了 🤐' : '加载中...' }}
                        </a-divider>
                    </div>
                    <a-skeleton :loading="state.loading" style="padding-top: 25px;" />
                </div>
              </a-col>
            </a-row>
            
        </a-col>
        <a-col :span="6" style="padding-left: 10px;" class="left-container">
            <div class="container1">
                <a-scrollbar :style="{ maxHeight: state.tagScrollbarMaxHeight, transition: 'max-height 0.3s ease 0s' }">
                    <div class="item">
                        <router-link tag="a" to="/social/hot" class="title" :class="router.currentRoute.value.query.tagId == undefined || router.currentRoute.value.query.tagId == '' ? 'active' :''">
                            <div class="svg-container">
                               <svg t="1734709397397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7747"><path d="M536.796756 350.460884c-15.129582 0-27.129894 8.216125-35.993772 24.647353-9.914814 18.779715-14.866592 53.598732-14.866592 104.46012 0 50.603515 4.694929 85.424578 14.084787 104.46012 8.081049 16.432251 20.344351 24.647353 36.775578 24.647353 16.95209 0 29.080316-8.215102 36.385698-24.647353 9.645684-19.561521 14.475689-54.382585 14.475689-104.46012-0.264013-51.117215-5.220908-86.200244-14.867616-105.241926C564.440349 358.420159 552.446177 350.460884 536.796756 350.460884z" fill="#ff5930" p-id="7748"></path><path d="M805.411563 231.911884 245.670236 231.911884c-48.060599 0-87.020936 38.960337-87.020936 87.020936l0 307.98242c0 48.060599 38.960337 87.020936 87.020936 87.020936l559.741327 0c48.060599 0 87.020936-38.960337 87.020936-87.020936L892.432499 318.933843C892.432499 270.873244 853.471139 231.911884 805.411563 231.911884zM420.209434 463.136106l0 32.863479L420.209434 625.107057c0 10.954493-5.477758 16.432251-16.432251 16.432251s-16.432251-5.477758-16.432251-16.432251L387.344932 495.999584l-101.720729 0L285.624203 625.107057c0 10.954493-5.477758 16.432251-16.432251 16.432251s-16.432251-5.477758-16.432251-16.432251L252.759701 495.999584l0-32.863479L252.759701 334.028633c0-10.954493 5.477758-16.432251 16.432251-16.432251 10.954493 0 16.432251 5.477758 16.432251 16.432251l0 129.107473 101.720729 0L387.344932 334.028633c0-10.954493 5.477758-16.432251 16.432251-16.432251s16.432251 5.477758 16.432251 16.432251L420.209434 463.136106zM600.959078 603.589998c-13.826913 25.302269-35.20992 37.94931-64.162322 37.94931-28.16855-0.26299-48.647977-11.865235-61.423955-34.819017-14.866592-25.039279-22.299889-67.421552-22.299889-127.151935 0-61.289901 7.042393-102.631472 21.12718-124.021641 16.689101-25.296129 37.558407-37.94931 62.597687-37.94931 28.16855 0.26299 49.816592 13.045107 64.946174 38.341237 12.519128 21.908986 18.779715 63.123666 18.779715 123.629715C620.258633 539.561729 613.737102 580.898183 600.959078 603.589998zM804.40156 350.460884l-50.860365 0L753.541195 625.107057c0 10.954493-5.477758 16.432251-16.432251 16.432251s-16.432251-5.477758-16.432251-16.432251L720.676693 350.460884 669.816329 350.460884c-10.954493 0-16.432251-5.477758-16.432251-16.432251s5.477758-16.432251 16.432251-16.432251l50.860365 0 32.863479 0 50.860365 0c10.954493 0 16.432251 5.477758 16.432251 16.432251S815.356053 350.460884 804.40156 350.460884z" fill="#ff5930" p-id="7749"></path></svg>
                               <div class="text">热门帖子</div>
                            </div>
                            
                            <!-- 使用打开新标签页的方式 -->
                            <div class="more" @click="openHotPosts">更多</div>
                        </router-link>            
                    </div>
                    
                    <div class="item" v-for="hot in filteredHotList" :key="hot.postId">
                        <a-tooltip :title="hot.name" placement="right" :disabled="tagTooltipDisabled">
                            <router-link 
                                tag="a" 
                                :to="{path: '/social/detail', query:{ postId : hot.postId}}" 
                                class="title" 
                                :class="router.currentRoute.value.query.postId == hot.postId ? 'active' :''">
                                <div class="text cell">{{hot.title}}</div>
                                <!-- 添加热度显示 -->
                                <div class="heat">
                                    <span>{{hot.viewCount || 0}}</span>
                                    <span class="heat-text">热度</span>
                                </div>
                            </router-link>
                        </a-tooltip>
                    </div>
                </a-scrollbar>
            </div>
        </a-col>
    </a-row>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { socialList , updateView , hotList , publishPosts  } from "@/api/front/social";
import DOMPurify from 'dompurify';
import { message } from 'ant-design-vue';
import Editor1 from '@/components/Editor/index.vue'
import { tagHotList,tagSearch } from '@/api/front/tag';
import useUserStore from "@/store/modules/user";
import { getUserProfile } from '@/api/front/user';
import dayjs from 'dayjs';
import { debounce } from 'lodash';
import { LoadingOutlined } from '@ant-design/icons-vue';
import { likePosts } from '@/api/front/like';
import { collectPosts } from '@/api/front/collect';

const userStore = useUserStore()

const loginModal = ref();

const router = useRouter();

const tagTooltipDisabled = ref<boolean>(true);

const currentTab = ref('recommend')
//展示的数组
const showData = ref<any[]>([]);
//右侧热门特贴子
const hotListData = ref<any[]>([]);
//热门
const socialListData = ref<any[]>([]);
//推荐
const recommendListData = ref<any[]>([]);
//精选
const choiceListData = ref<any[]>([]);

const error = reactive({
        tagId:'',//标签Id
        title:'',//标题
        content:'',//内容

        keyword :'',
    })
const form = reactive({
        deposit:'',//用户共有预存款
        allowTopic:true,//是否允许提交话题
        userGradeList:[],//用户等级
        availableTag:['toggleEditor'] as Array<string>,//话题编辑器允许使用标签
        allowTagIdList:[] as Array<string>,//有提交权限的标签Id

        popup_mentionUser :false,//是否弹出选择提及用户表单
        keyword :'',//关键词
        mentionUserEditorId:'',//提及用户编辑器Id

        isAllowLoadTagGroup:true,//是否允许加载标签组
        tagIdGroup :[],//标签Id组
        mentionUserList:[] as Array<any>,

        tagId:'',//标签Id
        title:'',//标题
        content:'',//内容
        allowSubmit:false,
        fileSystem:0,
        supportEditor:10,
        options:[] as Array<any>,

        remark:'',
        tags:[]
    });

const state = reactive({
        tagId:'' as string,
        pageView: [],//分页
        totalrecord : 0, //总记录数
		currentpage : 1, //当前页码
        totalpage : 1, //总页数
        maxresult: 10, //每页显示记录数  
        
        loading:true,//是否显示骨架屏
        isShowPage:false,//是否显示分页

        tagScrollbarMaxHeight:"calc(10vh - 186px)",

        cursorId: '', // 游标ID
        recommendScore: 0, // 推荐分数
        hasMore: true, // 是否还有更多数据
        isLoading: false, // 是否正在加载
});
//用户框框的加载样式
const indicator = h(LoadingOutlined, {
      style: {
        fontSize: '24px',
      },
      spin: true,
    });

const userInfo = ref<Record<string, any>>({})
//打开热门帖子
const openHotPosts = () => {
    const routeData = {
        path: '/social/hot'
    };
    const routeUrl = router.resolve(routeData);
    window.open(routeUrl.href, '_blank');
};
//滚动加载
const handleScroll = debounce(async () => {
    // 获取滚动容器
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    
    // 判断是否滚动到底部
    if (scrollHeight - scrollTop - clientHeight < 100 && !state.isLoading && state.hasMore) {
        await loadMoreData();
    }
}, 200);

const loadMoreData = async () => {
    if (state.isLoading || !state.hasMore) return;
    
    try {
        state.isLoading = true;
        const params: any = {
            type: currentTab.value,
        };
        
        if (state.cursorId) {
            params.cursorId = state.cursorId;
            params.recommendScore = state.recommendScore;
        }
        
        const res = await socialList(params,{
            repeatSubmit: false
        });
        console.log(res);
        
        if (res.data.postsList && res.data.postsList.length > 0) {
            const existingPostIds = new Set(showData.value.map(post => post.postId));
            const newPosts = res.data.postsList.filter(post => !existingPostIds.has(post.postId));
            
            if (newPosts.length > 0) {
                const lastItem = newPosts[newPosts.length - 1];
                state.cursorId = lastItem.postId;
                state.recommendScore = lastItem.recommendScore || 0;
                
                showData.value = [...showData.value, ...newPosts].sort((a, b) => 
                    new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
                );
            }
        }
        
        // 确保 hasMore 的更新是响应式的
        state.hasMore = Boolean(res.data.hasMore);
        
    } catch (error) {
        console.error('加载更多数据失败:', error);
        message.error('加载更多数据失败');
    } finally {
        state.isLoading = false;
    }
};



const debouncedHandleMouseEnter = debounce(async (userId: string) => {
  if (userInfo.value[userId]) {
      return;
  }
  try {
    const res = await getUserProfile({userId}, {
        //设置请求头
        repeatSubmit: false,
        showProgress: false
     });
      if (res.code === 200) {
          userInfo.value[userId] = res.data;
      }
  } catch (error) {
      console.error('获取用户信息失败:', error);
  }
}, 100);
// 使用防抖函数
const handleMouseEnter = (userId: string) => {
   debouncedHandleMouseEnter(userId);
};

const truncateContent = (content, maxLength) => {  
    const tempElement = document.createElement('div');  
    tempElement.innerHTML = content;
    
    // 保存所有图片标签
    const images = tempElement.getElementsByTagName('img');
    const imageElements = Array.from(images).map(img => img.outerHTML);
    
    // 移除所有图片标签以便计算文本长度
    Array.from(images).forEach(img => img.remove());
    
    // 获取纯文本内容
    const text = tempElement.innerText || tempElement.textContent;
    
    // 截取文本
    const truncatedText = text.length > maxLength 
        ? text.slice(0, maxLength) + '...'
        : text;
        
    // 将图片标签添加回截取后的文本前面
    return imageElements.join('') + truncatedText;
}

const isContentTruncated = (content: string, maxLength: number) => {
   const tempElement = document.createElement('div');  
   tempElement.innerHTML = content;
   
   // 移除所有图片标签后再计算长度
   const images = tempElement.getElementsByTagName('img');
   Array.from(images).forEach(img => img.remove());
   
   const text = tempElement.innerText || tempElement.textContent;  
   return text.length > maxLength;
}
//时间处理
const formatTime = (time: string) => {
   const now = dayjs();
   const postTime = dayjs(time);
   
   // 如果是今天
   if (postTime.format('YYYY-MM-DD') === now.format('YYYY-MM-DD')) {
       return '今天 ' + postTime.format('HH:mm');
   }
   
   // 如果是昨天
   if (postTime.format('YYYY-MM-DD') === now.subtract(1, 'day').format('YYYY-MM-DD')) {
       return '昨天 ' + postTime.format('HH:mm');
   }
   
   // 如果是今年
   if (postTime.format('YYYY') === now.format('YYYY')) {
       return postTime.format('MM-DD HH:mm');
   }
   
   // 其他情况显示完整日期
   return postTime.format('YYYY-MM-DD HH:mm');
};

//点赞
const debouncedLike = debounce(async (postId: string, userId: string, isLike: boolean) => {
  try {
    const params = {
      type: isLike ? 'unlike' : 'like',
      authorId: userId,
      postsId: postId
    }
    const headers = {
      repeatSubmit: false,
      showProgress: false
    }
    const res = await likePosts(params, headers);
    
    if (res.code !== 200) {
      // 如果请求失败，回滚UI更新
      const currentPost = showData.value.find(post => post.postId === postId);
      if (currentPost) {
        currentPost.likeFlag = isLike;
        currentPost.likeCount = isLike ? 
          currentPost.likeCount + 1 : 
          currentPost.likeCount - 1;
      }
      message.error('操作失败，请重试');
    }
  } catch (error) {
    // 发生错误时也回滚UI更新
    const currentPost = showData.value.find(post => post.postId === postId);
    if (currentPost) {
      currentPost.likeFlag = isLike;
      currentPost.likeCount = isLike ? 
        currentPost.likeCount + 1 : 
        currentPost.likeCount - 1;
    }
    message.error('操作失败，请重试');
  }
}, 2000);

//收藏
const debouncedCollect = debounce(async (postId: string, userId: string, isCollect: boolean) => {
  try {
    const params = {
      type: isCollect ? 'uncollect' : 'collect',
      authorId: userId,
      postsId: postId
    }
    const headers = {
      repeatSubmit: false,
      showProgress: false
    }
    const res = await collectPosts(params, headers);
    
    if (res.code !== 200) {
      // 如果请求失败，回滚UI更新
      const currentPost = showData.value.find(post => post.postId === postId);
      if (currentPost) {
        currentPost.collectFlag = isCollect;
        currentPost.collectCount = isCollect ? 
          currentPost.collectCount + 1 : 
          currentPost.collectCount - 1;
      }
      message.error('操作失败，请重试');
    }
  } catch (error) {
    // 发生错误时也回滚UI更新
    const currentPost = showData.value.find(post => post.postId === postId);
    if (currentPost) {
      currentPost.collectFlag = isCollect;
      currentPost.collectCount = isCollect ? 
        currentPost.collectCount + 1 : 
        currentPost.collectCount - 1;
    }
    message.error('操作失败，请重试');
  }
}, 2000);

//点赞处理函数
const handleLike = (postId: string, userId: string, isLike: boolean) => {
  // 先更新UI
  const currentPost = showData.value.find(post => post.postId === postId);
  if (currentPost) {
    currentPost.likeFlag = !isLike;
    currentPost.likeCount = isLike ? 
      currentPost.likeCount - 1 : 
      currentPost.likeCount + 1;
  }
  
  // 调用防抖的API请求
  debouncedLike(postId, userId, isLike);
}

//收藏处理函数
const handleCollect = (postId: string, userId: string, isCollect: boolean) => {
  // 先更新UI
  const currentPost = showData.value.find(post => post.postId === postId);
  if (currentPost) {
    currentPost.collectFlag = !isCollect;
    currentPost.collectCount = isCollect ? 
      currentPost.collectCount - 1 : 
      currentPost.collectCount + 1;
  }
  
  // 调用防抖的API请求
  debouncedCollect(postId, userId, isCollect);
}

//过滤热门帖子
const filteredHotList = computed(() => {
   return hotListData.value
       .filter(item => item.title) // 过滤掉没有title的数据
       .slice(0, 10); // 只取前10条数据
});
//过滤html标签
const sanitizeHtml=(content)=> {  
        return DOMPurify.sanitize(content);  
}
//删除标签
const handleTagClose = (index: number) => {
   form.tags.splice(index, 1);
}
//选中标签
const selectedTag = (val:string) => {
    if(form.tags.includes(val)){
        return;
    }
    form.tags.push(val);
}
//随机颜色
const colors = ref([
   '#f50', '#2db7f5', '#87d068', '#108ee9', '#f78e3d',
   '#00a2ae', '#ff85c0', '#7265e6', '#ffbf00', '#00a854',
   '#f56a00', '#fc0', '#bf7be5', '#19be6b', '#ff9900'
])
const getRandomColor = () => {
   return colors.value[Math.floor(Math.random() * colors.value.length)];
}
//获取标签列表
// const queryTagList = async () => {
//     try {
//         // 调用获取标签列表的API
//         const res = await tagHotList()
//         console.log(res);
        
//         form.options = res.data
//     } catch (error) {
//         message.error('获取标签列表失败')
//     }
// }

const tagSearchValue = ref('')
const filteredTags = computed(() => {
   if (!tagSearchValue.value) {
       return form.options
   }
   return form.options.filter(item => 
       item.tagName.toLowerCase().includes(tagSearchValue.value.toLowerCase())
   )
})
const handleTagSearch = () => {
   // 搜索逻辑
//    tagSearch({tagName:tagSearchValue.value})
   console.log('searching:', tagSearchValue.value)
}

// 处理发布按钮点击
const handlePublish = () => {
  if (!userStore.userId) {
    loginModal.value?.show();
    return;
  }
  router.push('/user/postEdit');
};

const onSubmit = async () => {
    console.log(form);
    const res = await publishPosts({
        title: form.title,
        content: form.content,
        releaseFlag: 'Y',
        remark: form.remark,
        tags: form.tags,
        categoryId:1
    });
    console.log(res);
    if(res.code === 200){
        message.success('发布成功');
        await getRecommendListData()
    }
}   

//切换不同tab，更新数据
const switchTab = async (tab: string) => {
    if (currentTab.value === tab) return; // 如果点击当前标签，不做处理
    
    currentTab.value = tab;
    state.loading = true;
    showData.value = [];
    state.cursorId = ''; // 重置游标ID
    state.recommendScore = 0; // 重置推荐分数
    state.hasMore = true; // 重置加载状态
    
    try {
        const res = await socialList({ type: tab });
        if (res.data.postsList && res.data.postsList.length > 0) {
            const lastItem = res.data.postsList[res.data.postsList.length - 1];
            state.cursorId = lastItem.postId;
            state.recommendScore = lastItem.recommendScore || 0;
            
            showData.value = [...res.data.postsList].sort((a, b) => 
                new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
            );
        }
        state.hasMore = res.data.hasMore;
    } catch (error) {
        console.error('切换标签页失败:', error);
        message.error('加载数据失败');
    } finally {
        state.loading = false;
    }
};
const getRecommendListData=async ()=>{
    const res=await socialList({ type: "recommend" })
    console.log(res);
    recommendListData.value = res.data.postsList;
}
//更新帖子阅读次数
const updateViewF = async (postId: string) => {
    try {
        console.log(postId);
        
        const res = await updateView({postId});
        console.log(res);
    } catch (error) {
        message.error('更新浏览量失败');
    }
}   
//初始列表
const getSocialList = async () => {
    try {
        state.loading = true;
        const [res1, res2, res3] = await Promise.all([  
            socialList({ type: "recommend" }),
            hotList({categoryId:0}),
            tagHotList()
        ]);
        
        if (res1.data.postsList && res1.data.postsList.length > 0) {
            const lastItem = res1.data.postsList[res1.data.postsList.length - 1];
            state.cursorId = lastItem.postId;
            state.recommendScore = lastItem.recommendScore || 0;
            
            showData.value = [...res1.data.postsList].sort((a, b) => 
                new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
            );
        }
        
        state.hasMore = Boolean(res1.data.hasMore);
        hotListData.value = res2.data;
        form.options = res3.data;
    } catch (error) {
        console.error('初始化数据加载失败:', error);
        message.error('数据加载失败');
    } finally {
        state.loading = false;
    }
};

onMounted(() => {
    getSocialList();
    window.addEventListener('scroll', handleScroll);
})

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});
</script>

<style lang="scss" scoped>
.icon-wrapper {
    display: inline-block;
    transition: transform 0.2s;
  }
  
.icon-wrapper:active {
    transform: scale(1.3);
}
.user-popover {
    width: 300px;
    padding: 12px;
    
    .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        
        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin-right: 12px;
        }
        
        .info {
            .name {
                font-size: 16px;
                font-weight: 500;
                color: #272e3b;
                margin-bottom: 4px;
            }
            
            .stats {
                color: #86909c;
                font-size: 14px;
                
                span {
                    margin-right: 12px;
                }
            }
        }
    }
    
    .remark {
        color: #86909c;
        font-size: 14px;
        line-height: 1.5;
    }
} 
.tag-trigger {
    cursor: pointer;
    color: #1890ff;
    display: flex;
    align-items: center;
}

:deep(.tag-popover) {
    .ant-popover-inner-content {
        padding: 12px;
    }
}
.tag-search-container {
    width: 220px;
    .tag-list-container {
        max-height: 200px;
        overflow-y: auto;
        border-top: 1px solid #e8e8e8;
        .tag-item {
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.3s;
            border-radius: 4px;
            &.disabled {
                color: #c0c4cc;
                cursor: not-allowed;
                background-color: #f5f5f5;
                
                &:hover {
                    background-color: #f5f5f5;
                    color: #c0c4cc;
                }
            }
            &:hover {
                background-color: #f5f5f5;
                color: #1890ff;
            }
        }
    }
}

.tag-list {
    margin: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    
    :deep(.ant-tag) {
        margin-right: 0;
        padding: 4px 8px;
        font-size: 14px;
        border: none;
        
        // 确保文字在深色背景���清晰可见
        &.ant-tag-has-color {
            color: white;
        }
    }
} 
.publish-btn{
    background-color: #1890ff;
    color: white;
    border: none;
    &:hover {
        background-color: #40a9ff;
    }
}
.editor-container {
    
   :deep(.bytemd) {
       height: 400px;  // 设置编辑器高度
       border: 1px solid #e8e8e8;
       border-radius: 4px;
       
       .bytemd-toolbar {
           border-bottom: 1px solid #e8e8e8;
       }
       
       .bytemd-status {
           border-top: 1px solid #e8e8e8;
       }
   }
}
.mainContent{
    .serviceNav {

        height: 66px;
        font-size: 15px;
        border-radius: 5px;
        padding: 0;
        display: flex;
        border-bottom: 1px solid #f2f3f5;
        ul{
            padding: 0;
        }
        .title {
            list-style: none;
            padding: 0 25px;
            height: 66px;
            line-height: 66px;
            cursor: pointer;
            position: relative;
            display: flex;;
            color: #333; // 更深的字体颜色增强对比
            &:hover {
                background-color: #f0f0f0; // 轻微背景色变化以提示可点击
            }
        }
        .active {
            cursor: pointer;
            p{
                color: #c2197b;
                border-bottom: 2px solid #c2197b;
                height: 56px;
            }   
        }
        .more{
            color: #86909c;
            .icom{
                margin-left: 5px;
                position: relative;
                top: 3px;
            }
        }
    }
}
.left-container{
    .container1{
        background: #fff;
        padding: 8px 0px 8px 0px;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: 0 0px 3px 0 rgba(0,0,0,.02), 0 4px 8px 0 rgba(0,0,0,.02);
        transition: top 0.3s ease 0s;
        height: fit-content;
        min-height: 100px;
    }
    .item{
        display: block;
        margin-bottom: 2px;
        padding: 0px 8px 0px 8px;
        &:nth-child(1) a{
            display: flex;
            justify-content: space-between;
        }
        .title{
            padding: 0 12px;
            color: #4e5969;
            border-radius: 4px;
            display: flex;
            align-items: center;
            height: 44px;
            
            font-size: 16px;
            transition: color .3s;
            .text{
                overflow:hidden;
                text-overflow:ellipsis; 
                white-space:nowrap;
            }

            .more{
                color: #4d9cdd;
                font-size: 14px;
                cursor: pointer;
            }   
            
            .svg-container{
                display: flex;
                align-items: center;
                svg {
                    margin-right: 10px;
                    width: 30px;
                    height: 30px;
                }
            }
            .image-container{
                position: relative;
                top: 2px;
                .el-image{
                    margin-right: 10px;
                }
            }
            &:hover {
                color: #272e3b;
                background: #f7f8fa;
            }

            &:hover svg {
                fill: #6b7785;
            }
        }
        .mouse{
            cursor:default;
            &:hover {
                color: #272e3b;
                background: #fff;
            }

            &:hover svg {
                fill: #86909c;
            }
        }
        .title.active{
            color: #272e3b;
            background: #f7f8fa !important;
            svg{
                fill: #6b7785;
            }
        }
        .allowRole{
            color: #e2b46e;
            .svg-container{
                svg {
                    fill: #e2b46e;
                }
            }
            &:hover {
                color: #e2b46e;
                background-color: #f8e7c4;
            }
            &:hover svg {
                fill: #e2b46e;
            }
        }
        .allowRole.active{
            color: #e2b46e;
            background: #f8e7c4 !important;
            svg{
                fill: #e2b46e;
            }
        }
    }
}
.main-container{
    .topicList {
        margin-left: 10px;
        margin-right: 10px;
        .topicItem {
            margin: 0;
            height: 100%;
            border-bottom: 1px solid #f2f3f5;
            padding: 15px 0 10px 0;
            position: relative;
            .avatarBox {
                position: relative;
                margin-left: 0px;
                padding: 0;
                float: left;
                .avatarLink {
                    display: block;
                    position: relative;
                    float: left;
                    padding-left: 4px;
                    img {
                        float: none;
                        display: block;
                        width: 62px;
                        height: 62px;
                        float: left;
                        margin-right: 10px;
                        border-radius:62px;
                        position:relative;
                    }
                }
            }
            .content {
                /**
                overflow: auto;
                overflow-x: hidden;**/
                margin-left:88px;
                
                .info {
                    margin-top:2px;
                    margin-bottom: 2px;
                    color: #c9cdd4;
                    padding-left: 0;
                    list-style: none;
                    font-size:0;/*父级元素设置font-size:0; 解决 display：inline-block两个元素之���的默认空格 */
                    
                    .module{
                        display: inline-block;
                        min-width: 10px;
                        padding: 4px 7px;
                        font-size: 12px;
                        color: #1890ff;
                        line-height: 1;
                        vertical-align: baseline;
                        white-space: nowrap;
                        text-align: center;
                        background-color: #E8F7FF;
                        border-radius: 2px;
                        
                    }
                    .userName{
                        color: #86909c;
                        font-size: 15px;
                    }
                    .cancelNickname{
                        font-size: 14px;
                        font-weight:normal;
                        margin-right: 3px;
                        color: transparent;
                        text-shadow: 0 0 5px rgba(0,0,0,0.4);
                        zoom: 1;
                        user-select:none;
                    }
                    .userRoleName{
                        display: inline-block;
                        white-space:nowrap;
                        vertical-align: middle;
                        padding: 2px 4px;
                        margin-left:5px;
                        font-size: 12px;
                        line-height: 14px;
                        -webkit-border-radius: 2px;
                        -moz-border-radius: 2px;
                        border-radius: 2px;
                        color:#e2b46e;
                        background-color:#f8e7c4;
                        position: relative;
                        top: -5px;
                    }
                    .staff{
                        display: inline-block;
                        white-space:nowrap;
                        vertical-align: middle;
                        padding: 2px 4px;
                        margin-left:5px;
                        font-size: 12px;
                        line-height: 14px;
                        -webkit-border-radius: 2px;
                        -moz-border-radius: 2px;
                        border-radius: 2px;
                        color:#4CD263;
                        background-color:#cafcc7;
                        position: relative;
                        top: -5px;
                    }
                }
                .info>li{
                    display: inline-block;
                }
                .time {
                    font-size: 14px;
                    color: #a9aeb8;
                }
                .essence{
                    display: inline-block;
                    vertical-align: middle;
                    padding: 2px 4px;
                    margin-left:5px;
                    font-size: 14px;
                    line-height: 16px;
                    -webkit-border-radius: 2px;
                    -moz-border-radius: 2px;
                    border-radius: 2px;
                    color: #fff;
                    background-color: #F76560;
                    position: relative;
                    top: -6px;
                }
                .top{
                    display: inline-block;
                    vertical-align: middle;
                    padding: 2px 4px;
                    margin-left:5px;
                    font-size: 14px;
                    line-height: 16px;
                    -webkit-border-radius: 2px;
                    -moz-border-radius: 2px;
                    border-radius: 2px;
                    color: #fff;
                    background-color: #57A9FB;
                    position: relative;
                    top: -6px;
                }
                .title {
                    margin: 0 5px 0 0;
                    font-size:0;
                    font-weight: normal;
                    word-break: break-all;
                    a{
                        color: #1890ff; // 标题使用主题色
                        font-size: 18px;
                        line-height: 32px;
                        &:hover {
                            text-decoration: none;
                            color: #1890ff;
                        }
                    }
                    .topicRoleName{
                        display: inline-block;
                        white-space:nowrap;
                        vertical-align: middle;
                        padding: 2px 4px;
                        margin-left:5px;
                        font-size: 14px;
                        line-height: 16px;
                        -webkit-border-radius: 2px;
                        -moz-border-radius: 2px;
                        border-radius: 2px;
                        color: #fff;
                        background-color:#F9CC45;
                        position: relative;
                        top: -6px;
                    }
                    .redEnvelope{
                        font-size: 22px;
                        position:relative;
                        top:4px;
                        color: #ff483a;
                        margin-left: 3px;
                    }
                    .hideTagType{
                        font-size:0;/*父级元素设置font-size:0; 解决 display：inline-block两个元素之间的默认空格 */
                        position:relative;top:-4px;
                        .circle{
                            border-radius:12px;display: inline-block;margin-left:5px;
                            width: 24px;height: 24px;
                            position:relative;
                            .icon{
                                margin-left: 5px;position:relative;top:4px;
                            }
                        }
                        .point{
                            &:before{
                                content: ' ';
                                position: absolute;
                                width: 4px;
                                height: 4px;
                                border-radius: 2px;
                                top: 13px;
                                left: 10px;
                            }
                        }
                    }

                }
                .detail{
                    position: relative;
                    .read-more {
                        color: #1890ff;
                        margin-left: 5px;
                        font-size: 14px;
                        &:hover {
                            color: #40a9ff;
                        }
                    }                    
                    
                    .summary{
                        margin: 5px 50px 0 0;
                        font-size: 15px;
                        line-height: 28px;
                        font-weight:normal;
                        text-decoration:none;
                        color: #666; // 内容摘要使用深灰色，减少眼睛疲劳
                    }
                }
                .bottomInfo{
                    margin-top:10px;
                    display: flex;
                    justify-content: space-between;
                    .tag-container{
                        float: left;
                        .tag{
                            display: inline-block;
                            white-space:nowrap;
                            margin-right: 5px;
                            padding: 0px 8px;
                            font-size: 14px;
                            line-height: 24px;
                            border-radius: 8px;
                            color: #898989;
                            background-color: #f5f5f5;
                        }
                    }
                    .statistic{
                        display: flex;
                        font-size: 14px;
                        position: relative;
                        top: 2px;
                        color: #a9aeb8;
                        .iconItem{
                            cursor: pointer;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-right: 10px;
                            p{
                                vertical-align: middle;
                                margin: 0;
                                margin-left: 4px;
                                line-height: 1;
                                color: #2c2c2c;
                            }
                            a{
                                display: block;
                                vertical-align: middle;
                                margin: 0;
                                margin-left: 4px;
                                line-height: 1;
                                color: #2c2c2c;
                            }
                        }
                    }
                    
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .main-container, .left-container {
        padding: 0;
        .topicList, .container1 {
            margin: 10px 0;
        }
    }
}

.left-container {
    .item {
        .title {
            // 修改为flex布局以支持两端对齐
            display: flex !important;
            justify-content: space-between;
            align-items: center;
            
            .text {
                flex: 1;
                margin-right: 8px;
            }
            
            .heat {
                display: flex;
                align-items: center;
                font-size: 12px;
                color: #86909c;
                white-space: nowrap;
                
                .heat-text {
                    margin-left: 4px;
                }
            }
        }
    }
}
</style>